<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-06-16 10:54:03
 * @LastEditors: by
 * @LastEditTime: 2021-11-29 16:42:05
-->
<template>
    <el-dialog
        ref="dialogForm"
        top="10vh"
        :title="title"
        :model-value="dialogVisibled"
        width="50%"
        custom-class="chatDialog"
        :before-close="handleClose"
        @opened="handleGetData">
        <div class="select">
            <el-select v-model="currentState" @change="getTableData" placeholder="站类" clearable>
                <el-option v-for="(item, index) in stateList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
            <el-select v-model="currentStatus" @change="getTableData" placeholder="状态" clearable>
                <el-option label="全部" value=""></el-option>
                <el-option label="异常" value="2"></el-option>
                <el-option label="正常" value="1"></el-option>
            </el-select>
            <el-date-picker
                v-model="queryTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm"
                @change="changeTime"
                placeholder="选择时间">
            </el-date-picker>
        </div>
        <div>
            <Table 
                :loading="loading" 
                :data="tableData" 
                :option="options" 
                :height="'500px'"
                @handleCurrentChange="getTableData"
                @handleSizeChange="getTableData">
                <template v-slot:sbState="{rows}">
                    <span :class="rows.sbState=='1'?'normal':'abnormal'">{{rows.sbState=='1'?'正常':'异常'}}</span>
                </template>
            </Table>
        </div>
       
       <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">关 闭</el-button>
            </span>
    </template>
    </el-dialog>
</template>

<script>
import dashboardsApi from '@/api/dashboard'
import { formatTimestamp } from '@/utils/common'
export default {
    name: 'dashboardDialgo',
    emits: ['close'],
    props: {
        title: {
            default: '',
            type: String
        },
        dialogVisible: {
            default: false,
            type: Boolean
        },
        state: {
            default: '',
            type: String
        }
    },
    computed: {
        dialogVisibled() {
            return this.dialogVisible
        }
        
    },
    data() {
        return {
            loading: false,
            currentStatus: '2',
            queryTime: '',
            endTime: '',
            currentState: '',
            stateList: [
                {name: '雨情站', code: 'PP'},
                {name: '水情站', code: 'SQ'},
                {name: '墒情站', code: 'SS'},
                {name: '地下水位站', code: 'ZG'},
                {name: '视频设备', code: 'SP'},
            ],
            tableData: [ ],
            options: {
                index: true,
                indexTitle: '序号',
                border: false,
                stripe: true,
                page: true,
                total: 0,
                currentPage: 1,
                pageSize: 10,
                handleRowShow: false, //操作栏
                cloumn: [
                    {
                        prop: 'acquisitionPointTime',
                        label: '时间'
                    },
                    {
                        prop: 'addvcd',
                        label: '站点',
                    },
                    {
                        prop: 'addname',
                        label: '站名',
                    },
                    {
                        prop: 'stnm',
                        label: '站类',
                    },
                    {
                        prop: 'sbState',
                        label: '状态',
                        slot: true
                    },
                ],
            },
          
        }
    },
    methods: {
        handleClose() {
            this.$emit('close')
        },
        handleGetData() {
            this.currentState = this.state
            this.queryTime = localStorage.getItem('queryTime')
            this.getTableData()
        },
        changeTime(val) {
            this.queryTime = formatTimestamp(val)
            this.getTableData()
        },
        getTableData() {
            this.loading = true
            let params = {
                current: this.options.currentPage,
                pageSize: this.options.pageSize,
                queryTime: this.queryTime,
                sbState: this.currentStatus,
                stationType: this.currentState
            }
            dashboardsApi.deviceStatePage(params)
                .then(res => {
                    this.loading = false
                    this.options.total = res.data.total
                    this.tableData = res.data.records
                })
                .catch(err => {
                    this.loading = false
                    this.$message.error(err.message||err.data.message)
                })
        }
       
    }
}
</script>

<style lang="scss" scoped>
.el-dialog__body {
    >div {
        margin-bottom: 10px;
    }
}
.select {
    margin: 10px 0;
    >div {
       margin: 0 10px; 
    }
}
.normal {
    color: #0AD100;
}
.abnormal {
    color: #FF4242;
}

</style>